Animation Workshop
Here we will explore the possibility of displaying some animated dinos on this wiki. Section 1: Simple Test of Animations in Wiki Pages Testing if small animations can be displayed easily on Wiki Pages. You know where this project is going! Test 1. Simple in-line display. Does it work? ' '''Test 2. Inside Tables: Now let's test if the trees still sparkle inside a wiki table. ' '''Test 3: '''Well that image is a little big for my taste. Since we can't use th '''px modifier without destroying the Animation let 's try another approach. Next we simply uploaded the Cristmas Tree to www.GifMagic.com and used their FREE service to decrease the size to 150x150. The modified animation was downloaded in seconds to my computer and then uploaded here. Let's see how it looks. Not bad! This great service at can also help crop, filter, enlarge, rotate and even flip our animations. You can add a beveled box around your animation as shown here. Section 2: Sprite Sheets Animations consist of a series of frames or cells which are displayed, much like an old-fashioned flip book, in a sequence to create the illusion of motion. Nowadays, these individual frames are all packed into a single graphic image so that the server only has to send out a single file, resulting in greater efficiency. This larger graphic file, containing all the individual frames is called a''' sprite sheet'. Here is a sample sprite sheet for a baby White Sabretooth Tiger. You can see there are a total of 15 small frames. These frames must literally be cut out of the sprite sheet one at a time using the information provided in an accompanying '''plist' file, and then displayed in order to create the animation. The abbreviation plist is short for "property list". Each plist file must identify the sprite sheet or Texture File with a line similar to: realTextureFileName dino-sabertoothwhite-s1.png It must also identify the size, which is often limited to powers-of-two for optimization reasons. size {256,512} Notice the width is 256 = 2^8 while the height is 512 = 2^9, both powers of two. Finally, the plist must provide instructions on how to cut out each individual image from the sprite sheet. This involves giving coordinates for the bounding rectangle for each frame and any additional instruction such as whether the frame has been rotated. Animation Workaround Now wiki pages are not designed to take as input a srite sheet and its associated plist file and display the animation. So our next project is to''' find a workaround''' suitable for use in a wiki page. Any ideas out there? Please help! Let's Try The Opposite Since we have not solved that problem yet, let's circle the wagons and slowly close in on the problem. It turns out of course to be quite easy to extract the frames from an Animated gif. So let's see how to do this related task to build our confidence. We will do this for the animated Christmas tree shown above. First download Adobe Air and the free Showbox utility. We used the Animation to Sheet feature with the icon by dragging our Xmas Tree animated gif file onto the icon. With a few clicks we can assemble our own Sprite Sheet for the above Christmas Tree. There are options for eigther 1D or 2D arrangements under teh Settings button. 1D Sprite Sheet for Xmas Tree: Game Engine Single Row Option 2D Sprite Sheet for Xmas Tree: Game Engine Multi Rows Option ' ' If you look carefully from frame to frame, you will see the lights flicker on in the sequence red, green, blue and yellow. We conclude, it is easy to go from an Animated Gifto a Sprite Sheet. All Engines Full Reverse! But our problem is the reverse. We have plenty of in-game Sprite sheets, and want to create the animation - without the game engine of course. So let's start with the above 2D Sprite sheet for the Xmas Tree and see if we can recreate the original animated GIF. We need to extract the individual frames, all 15 of them from the Sprite Sheet. This can be done simply by dragging the 1D sprite onto the "Extract Sprites" icon in Shoebox. In this case we readily received all 15 frames as separate PNG files. Not the disassembly here was unusually easy because all teh frames have have teh same rectangular size. This will not be the case with our dino animations because the dinos are walking, jumping and playing various tricks - and in general changing size! That will present quite the challenge that may have to be handled on a frame by frame basis to prevent the animations from showing disturbing jumps and jitters. Next we will test if we can assemble the 15 individual frames back into an animated GIF - using only free software. I used GraphicConverter, but tehre are rfeally many many free options to choose from. I have all 15 frames that have been cut out of the 1D sprite sheet in a single folder. To assemble them back into an animated GIF using GraphicsConveter, just use the detailed instructions here . On my Mac, the Animated Gif option was under the Window menu item instead of the Picture menu choice. Now you can see I was not quite successful! It looks like the frames are out of order. It also is not in an endless loop, so the animation just dies out shortly. For now, we will leave this posted so you can have a nice laugh at my first attempt! But undeterred, I shall try again tomorrow. Bird in Flight Here is an example borrowed from a friendly website, featuring my Totem Animal, the Robin in flight. You can see the sprite sheet has been assembled from 22 individual frames. The image dimensions of 782 × 1024 are in this case 1014 = 2^10 (a power of 2) but 782 is not a power of 2. Section 3: Animation Tools Next let's look at TexturePacker which can be downloaded here . There are free versions for Mac, Windows and Ubuntu.